<template>
  <div class="main-div">
    <el-button type="danger" @click="importWorker" style="margin-bottom: 20px;">
      批量导入为工作人员帐号
    </el-button>
    <el-button
      style="margin-left: 10px;"
      type="info"
      @click="dialogUpdateVisible=true"
    >
      批量替换
    </el-button>

    <!-- <div style="display:none">
      <div v-for="item in orglist" class="itemLine":style="item.Level == 1 ? 'line-height:30px;' : ''" >
        <span v-for="item2 in item.Children" style="opacity: 0">占位</span>
         <div class="list-name">{{ item.Name }}</div>
        <el-button type="primary" plain  @click="addNode(item.Id)"><i class="el-icon-plus" /> 导入成员</el-button>
      </div>
    </div> -->
    <!-- 组织结构 -->
    <!-- <div class="person-list">
      <div class="person-item"  v-for="(item, index) in orglist" :key="item.Id">
        <div class="itemLine">
           <i class="el-icon-plus"/><span class="list-name">{{item.Name}}</span>
          <el-button type="primary" plain  @click="addNode(item.Id)" ><i class="el-icon-plus" /> 导入成员</el-button>
          <el-button  @click="showChildren(item,index)" v-if="item.Child"><i class="el-icon-arrow-down"/></el-button>
        </div>

        <div class="children-list"  ref="liCon" >
           <div class="person-children" v-for="(item2) in item.Child" :key="item2.Id">
           <i class="el-icon-minus"  /> <span class="list-name">{{item2.Name}}</span>
            <el-button type="primary" plain   @click="addNode(item2.Id)"><i class="el-icon-plus" /> 导入成员</el-button>
            <div v-if="item2.Child.length > 0" v-for="children in item2.children" :key="children.Id">
              <i class="el-icon-minus"  /> <span class="list-name">{{children.Name}}</span>
              <el-button type="primary" plain   @click="addNode(children.Id)"><i class="el-icon-plus" /> 导入成员</el-button>  
            </div>
          </div>
        </div>
        
       
      </div>
    </div> -->
    <el-tree
      :data="orglist"
      :props="defaultProps"
      :indent="indent"
      class="tree-line"
    >
      <span class="node-style" slot-scope="{ node, orglist }">
        <span class="node-name" style="width: 60px; display: inline-block;">
          {{ node.label }}
        </span>
        <el-button
          style="margin-left: 10px;"
          plain
          type="warning"
          size="mini"
          @click.stop="handleModifyName(node.data)"
        >
          修改姓名
        </el-button>

        <el-button
          style="margin-left: 10px;"
          plain
          type="primary"
          size="mini"
          @click.stop="addNode(node.data.Pid)"
        >
          导入成员
        </el-button>
      </span>
    </el-tree>

    <!-- 导入的弹层 -->
    <el-dialog
      title="选择需要导入的成员表格"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span class="body">
        <input class="node-btn" type="file" @change="changeFile($event)" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upnode">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改姓名弹出层 -->
    <el-dialog title="修改姓名" :visible.sync="dialogNameVisible" width="30%">
      <span class="body">
        <el-input
          placeholder="请输入姓名"
          v-model="user.Name"
          clearable
        ></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogNameVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdateName">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 批量修改 -->

    <el-dialog title="批量修改" :visible.sync="dialogUpdateVisible" width="80%">
      <div class="replace-box">
        <div class="box-left">
          <el-tree
            :data="orglist"
            :props="defaultProps"
            :indent="indent"
            class="tree-line"
          >
            <span class="node-style" slot-scope="{ node, orglist }">
              <span class="node-name node-info" :class="leftUserId===node.data.Id?'active':''" :data-id="node.data.Id"  @click.stop="handleSelect($event,node.data)">
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
        <div class="box-right">
          <el-tree
            :data="orglist"
            :props="defaultProps"
            :indent="indent"
            class="tree-line"
          >
            <span class="node-style" slot-scope="{ node, orglist }">
              <span class="node-name node-info"  :class="rightUserId===node.data.Id?'active':''" :data-id="node.data.Id" @click.stop="handleSelect2($event,node.data)">
                {{ node.label }}
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleRepiceName">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  uploadNodefile,
  fetchOrgList,
  importtoworker,
  updateUserName,
  replaceUserName
} from '@/api/mdlist'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      pid: 1,
      leftUserId:0,//用户id
      rightUserId:0,//用户id
      inputFile: null,
      showUploadDiv: false,
      orglist: [],
      user: {
        Name: '',
      }, //修改对象
      defaultProps: {
        children: 'Child',
        label: 'Name',
      },
      dialogVisible: false,
      dialogNameVisible: false,
      dialogUpdateVisible: false,
      newObj: {},
      isHow: false,
      indent: 10,
    }
  },
  created() {
    this.mdid = this.$route.query && this.$route.query.id
    this.getOrgList()
  },
  methods: {
    changeFile(e) {
      this.inputFile = e.target.files[0]
    },
    addNode(pid) {
      this.pid = pid
      this.dialogVisible = true
    },
    getOrgList() {
      fetchOrgList().then((response) => {
        this.listLoading = false
        if (response.code == 0) {
          console.log('abc===', response.data)
          this.orglist = response.data.list
        }
      })
    },

    upnode() {
      this.dialogVisible = false //关闭弹层
      let _this = this
      //提交数据包
      let param = new FormData()
      param.append('Pid', this.pid)
      param.append('file', this.inputFile, this.inputFile.name)
      _this.listLoading = true
      uploadNodefile(param, {
        'Content-Type': 'multipart/form-data',
      }).then((response) => {
        this.listLoading = false
        if (response.code == 0) {
          console.log('abc===', response.data)
        }
      })
    },
    importWorker() {
      importtoworker().then((response) => {
        this.listLoading = false
        if (response.code == 0) {
          console.log('abc===', response.data)
        }
      })
    },
    showChildren(item, index) {
      const liCon = this.$refs.liCon[index]
      if (liCon.style.display === 'none') {
        liCon.style.display = 'block'
      } else {
        liCon.style.display = 'none'
      }
    },
    handleNodeClick(data) {
      console.log(data)
    },
    //修改姓名
    handleModifyName(data) {
      this.dialogNameVisible = true
      this.user = data
    },

    //添加修改的名字
    handleUpdateName() {
      let { Id, Name } = this.user
      updateUserName({ Id, Name }).then((res) => {
        if (res.msg === 'success') {
          alert('修改成功！')
          this.dialogNameVisible = false
          this.getOrgList()
        }
      })
    },

    //批量替换
   handleSelect(e,data){
     this.leftUserId = Number(e.target.dataset.id) 
   },
    handleSelect2(e,data){
     this.rightUserId = Number(e.target.dataset.id) 
   },

   handleRepiceName(){
     let Fid = this.leftUserId
     let Tid = this.rightUserId
     replaceUserName({Fid,Tid}).then((res)=> {
       if (res.msg === 'success') {
         alert('替换成功！')
         this.dialogUpdateVisible = false
         this.getOrgList()
       }
     }) 
   }

  },
}
</script>
<style>
.main-div {
  padding: 20px 0 0 20px;
}
.node-btn {
  font-size: 10px;
  color: #f60;
  cursor: pointer;
}
.itemLine {
  border-bottom: 1px dashed rgb(219, 219, 219);
  padding: 8px 0;
  display: flex;
  align-items: center;
}
.list-name {
  width: 88px;
  border: 1px solid #f7f7f7;
  display: flex;
  height: 36px;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.person-list {
  width: 100%;
}
.person-item {
  width: 100%;
}

.person-children {
  display: flex;
  align-items: center;
  padding: 8px 0;
  margin-left: 60px;
  border-bottom: 1px solid #f9e0e0;
}
.tree-line .el-tree-node {
  position: relative;
  padding-left: 16px;
}

.tree-line .el-tree-node__children {
  padding-left: 40px;
}
.tree-line .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
}
.tree-line .el-tree-node::before {
  content: '';
  height: 100%;
  width: 1px;
  position: absolute;
  left: -6px;
  top: -20px;
  border-width: 1px;
  border-left: 1px dashed #52627c;
}
.tree-line .el-tree-node:last-child::before {
  height: 38px;
}
.tree-line .el-tree-node::after {
  content: '';
  width: 24px;
  height: 20px;
  position: absolute;
  left: -3px;
  top: 18px;
  border-width: 1px;
  border-top: 1px dashed #52627c;
}
.tree-line > .el-tree-node::after {
  border-top: none;
}
.tree-line > .el-tree-node::after {
  border-top: none;
}
.tree-line .el-tree-node__expand-icon {
  font-size: 16px;
}
.tree-line > .el-tree-node::before {
  border-left: none;
}
.tree-line .el-tree-node__expand-icon.is-leaf {
  color: transparent;
  display: none;
}
.replace-box {
  width: 100%;
  display: flex;
}
.box-left {
  flex: 1;
  width: 100%;
  margin-right: 10px;
  border: 1px solid #f4f4f4;
  border-radius: 10px;
  padding: 10px;
}
.box-right {
  flex: 1;
  width: 100%;
  margin-left: 10px;
  border: 1px solid #f4f4f4;
  border-radius: 10px;
  padding: 10px;
}
.node-info {
   width: 120px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: inline-block;
  color: #1890ff;
  background: #e8f4ff;
  border-color: #a3d3ff;
  border-radius: 5px;
}
.active {
  color: #FFFFFF;
  background-color: #1890ff;
  border-color: #1890ff;
}
</style>
